<script setup lang="ts">
import { getOriginalSysConfigApi, updateSysConfigApi } from '@/api/system_setting';
// import { toast } from '@/utils/layer';
import { reactive, ref } from 'vue';


const form = reactive({
    "open_reg": 1,
    "reg_method": "username",
    "password_min": 7,
    "password_encrypt": [],
    "upload_method": "oss",
    "upload_config": {
        "Bucket": "",
        "http": "",
        "ACCESS_KEY": "",
        "SECRET_KEY": ""
    },
    "api_safe": 1,
    "api_secret": "",
})
const activeName = ref("f")
const isLoading = ref(false)
const getSysConfigData = () => {
    isLoading.value = true
    getOriginalSysConfigApi()
        .then((res) => {
            for (const key in form) {
                // @ts-ignore
                form[key] = res[key]
            }
            // @ts-ignore
            form.password_encrypt = form.password_encrypt.split(",")
        })
        .finally(() => isLoading.value = false)
}
getSysConfigData()
const onSubmit = () => {
    isLoading.value = true
    updateSysConfigApi({
        ...form,
        password_encrypt: form.password_encrypt.join(",")
    })
        .then(() => {
            // toast("操作成功")
            getSysConfigData()
        })
        .finally(() => isLoading.value = false)
}
</script>

<template>
    <div v-loading="isLoading" class="bg-white p-4 rounded">
        <el-form :model="form" label-width="160px">
            <el-tabs v-model="activeName">
                <el-tab-pane label="注册与访问" name="f">
                    <el-form-item label="是否允许注册会员">
                        <el-radio-group v-model="form.open_reg">
                            <el-radio :label="0" border>关闭</el-radio>
                            <el-radio :label="1" border>开启</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="注册类型">
                        <el-radio-group v-model="form.reg_method">
                            <el-radio label="username" border>普通注册</el-radio>
                            <el-radio label="phone" border>手机注册</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="密码最小长度">
                        <el-input v-model="form.password_min" placeholder="密码最小长度" type="number" style="width: 30%;" />
                    </el-form-item>
                    <el-form-item label="强制密码复杂度">
                        <el-checkbox-group v-model="form.password_encrypt">
                            <el-checkbox label="0" border>数字</el-checkbox>
                            <el-checkbox label="1" border>小写字母</el-checkbox>
                            <el-checkbox label="2" border>大写字母</el-checkbox>
                            <el-checkbox label="3" border>符号</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>

                </el-tab-pane>
                <el-tab-pane label="上传设置" name="s">
                    <el-form-item label="默认上传方式">
                        <el-radio v-model="form.upload_method" label="oss" border>对象存储</el-radio>
                    </el-form-item>
                    <el-form-item label="Bucket">
                        <el-input v-model="form.upload_config.Bucket" placeholder="Bucket" style="width: 30%;" />
                    </el-form-item>
                    <el-form-item label="ACCESS_KEY">
                        <el-input v-model="form.upload_config.ACCESS_KEY" placeholder="ACCESS_KEY"
                            style="width: 30%;" />
                    </el-form-item>
                    <el-form-item label="SECRET_KEY">
                        <el-input v-model="form.upload_config.SECRET_KEY" placeholder="SECRET_KEY"
                            style="width: 30%;" />
                    </el-form-item>
                    <el-form-item label="空间域名">
                        <el-input v-model="form.upload_config.http" placeholder="空间域名" style="width: 30%;">
                            <template #prepend>https://</template>
                        </el-input>
                    </el-form-item>
                </el-tab-pane>
                <el-tab-pane label="API安全" name="t">
                    <el-form-item label="是否开启API安全" size="normal">
                        <el-radio-group v-model="form.api_safe">
                            <el-radio :label="0" border>关闭</el-radio>
                            <el-radio :label="1" border>开启</el-radio>
                        </el-radio-group>
                        <small class="flex text-gray-500 ml-1">
                            api安全功能开启之后调用前端api需要传输签名串
                        </small>
                    </el-form-item>
                    <el-form-item label="秘钥" size="normal">
                        <el-input v-model="form.api_secret" placeholder="请输入秘钥" style="width: 30%;" />
                        <small class="flex text-gray-500 ml-1">
                            秘钥设置关系系统中api调用传输签名串的编码规则，以及会员token解析，请慎重设置，注意设置之后对应会员要求重新登录获取token
                        </small>
                    </el-form-item>

                </el-tab-pane>
            </el-tabs>
            <el-form-item>
                <el-button type="primary" size="default" @click="onSubmit">保存</el-button>
            </el-form-item>

        </el-form>

    </div>
</template>



<style scoped></style>
